<template>
    <div class="myDesktop">
        <div class="">
            <div class="title sty1">我的桌面</div>
            <div class="menu-out">
                <div class="munuSty1">
                    <div style="display: flex;justify-content: space-between;width:100%;">
                        <div class="list-box">
                            <div class="munuSty1-list" v-if="!allBtnType" v-for="(itemOne, index) in myDeskList"
                                 :key="index">
                                <div class="HistoryList">
                                    <div class="HistoryItem" align="middle" @click="jumpPage(itemOne.id, itemOne.name)">
                                        <!-- <div class="imgBox">
                                            
                                        </div> -->
                                        <img :src="itemOne.icon" alt="">
                                        <span>
                                            {{itemOne.title}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div v-if="allBtnType" class="munuSty1-list" v-for="(itemOne, index) in myDeskList"
                                 v-dragging="{ item: itemOne, list: myDeskList, group: 'itemOne' }" :key="index">
                                <div class="HistoryList">
                                    <div class="HistoryItem" align="middle" @click="jumpPage(itemOne.id, itemOne.name)">
                                        <!-- <div :class="['imgBox', itemOne.icon ? itemOne.icon : 'todo']"></div> -->
                                        <img :src="itemOne.icon" alt="">
                                        <span> {{itemOne.title}}

                                        </span>
                                        <Icon v-if="allBtnType" class="position close"
                                              @click.stop="deleteCurrentItem(itemOne.id)"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="menu-out-btn">
                            <p @click="myDesktopEidt" class="EidtBnt"><img src="../../images/icon/write.png" alt=""></p>
                            <p @click="myDesktopOK" class="okBnt"><img src="../../images/icon/ok.png" alt=""></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="title sty3">全部功能
            <Icon type="checkmark"/>
        </div>
        <div class="allFunctions-box">
            <div v-for="(item, index) in allFunctions" :key="index" class="allFunctions-item">
                <div class="title sty2"> {{item.name}}

                </div>
                <div class="menu-out">
                    <div class="munuSty1">
                        <div class="munuSty1-list" v-for="(itme2, index2) in item.children" :key="index2">
                            <div class="HistoryList">
                                <div class="HistoryItem" align="middle" @click="jumpPage(itme2.id, itme2.name)">
                                    <!-- <div :class="['imgBox', itme2.icon ? itme2.icon : 'todo']"></div> -->
                                    <img :src="itme2.icon" alt="">
                                    <span> 
                                        {{itme2.name}}
                                    </span>
                                    <span v-if="allBtnType">
                                        <Icon v-if="itme2.btnTypeIsReduce" class="position close"
                                              @click.stop="delItem(itme2.id)"/>
                                        <Icon v-else class="position add" @click.stop="AddItem(itme2.id)"/>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Spin size="large" fix v-show="showSpin">
            {{spinMsg}}

        </Spin>
    </div>
</template>
<script>
    export default {
        inject: ['reload'],
        name: 'myDesktop',
        data () {
            return {
                showSpin: false,
                spinMsg: '加载中，请稍后...',
                // 所有按钮状态
                allBtnType: false,
                // 我的桌面数组
                myDeskList: [],
                // 全部功能--后台拿到数据
                allFunctions: [],
                menuLength: 0
            };
        },

        components: {},

        computed: {},

        mounted: function () {
            this.findAllMenu();
            // console.log(this.allFunctions, 123123);
            // 拿我的桌面一排数据
            this.findMyResourceList();

            // 移动方法
            this.$dragging.$on('dragged', ({
                value
            }) => {
                console.log(value.item, '当前11');
                console.log(value.list, '全部11');
            });
        },

        methods: {
            findAllMenu () {
                console.log(localStorage, 998);
                let vue = this;
                // setTimeout(function () {
                // if (localStorage.pageOpenedListTwo) {
                let menu = sessionStorage.getItem('menus');
                if (!vue.menuLength || vue.menuLength != menu.length) {
                    vue.menuLength = menu.length;
                    console.log('获取菜单');
                    vue.allFunctions = JSON.parse(sessionStorage.getItem('menus'));
                    // vue.allFunctions.forEach(item => {
                    //     if (item.children && item.children.length > 0) {
                    //         // console.log(item, 'item');
                    //         item.children.forEach(item2 => {
                    //             // console.log(item2);
                    //             if (item2.icon === 'customerList' && item2.remark) {
                    //                 item2.title = item2.title + '(' + item2.remark + ')';
                    //             }
                    //         });
                    //     }
                    // });
                }
                // } else {
                // this.findAllMenu();
                // }
                // }, 100);
            },
            // 拿我的桌面一排数据
            findMyResourceList () {
                this.showSpin = true;
                depot.get({
                    url: this.URL.USER.FIND_MY_RESOURCE_LIST,
                    cb: data => {
                        this.showSpin = false;

                        if (data.code === 0) {
                            console.log(data.data, 111);
                            this.myDeskList = [];

                            data.data.forEach(item => {
                                let obj = {};
                                obj.path = item.resource.link;
                                obj.icon = item.resource.icon;
                                obj.name = item.resource.link.replace('/', '');
                                obj.title = item.resource.name;
                                obj.img = item.resource.img;
                                obj.id = item.resource.id;
                                this.myDeskList.push(obj);
                            });
                        } else {
                            this.$Message.error(data.message);
                        }
                    },

                    ce: error => {
                        this.showSpin = false;
                    }
                });
            },

            // 编辑按钮
            myDesktopEidt () {
                this.allBtnType = true;

                this.myDeskList.forEach((item, index) => {
                    this.allFunctions.forEach((item2, index2) => {
                        item2.children.forEach((item3, index3) => {
                            if (item.id === item3.id) {
                                // 子集添加btn为真字段显示减号
                                item3.btnTypeIsReduce = true;
                            }
                        });
                    });
                });
            },

            // 完成按钮
            myDesktopOK () {
                this.showSpin = true;
                let postData = JSON.stringify(this.myDeskList.map(v => v.id));

                depot.post({
                    url: this.URL.USER.SAVE_MY_RESOURCE,
                    data: postData,
                    cb: data => {
                        this.showSpin = false;

                        if (data.code === 0) {
                            this.allBtnType = false;
                        } else {
                            this.$Message.error(data.message);
                        }
                    },

                    ce: error => {
                        this.showSpin = false;
                    }
                });

                // this.myDeskList.forEach((item, index) => {
                //     delete item['btnTypeIsReduce'];
                // });

                console.log(this.myDeskList, '完成按钮点击后数组');
            },

            // 我的桌面--删除当前项按钮
            deleteCurrentItem (id) {
                this.myDeskList.forEach((item, index) => {
                    if (item.id === id) {
                        this.myDeskList.splice(index, 1);
                    }

                    this.allFunctions.forEach((item2, index2) => {
                        item2.children.forEach((item3, index3) => {
                            if (item3.id === id) {
                                // 子集添加btn为真字段显示减号
                                item3.btnTypeIsReduce = false;
                            }
                        });
                    });
                });
            },

            // 全部功能--删除单个项目按钮
            delItem (id) {
                this.myDeskList.forEach((item, index) => {
                    if (item.id === id) {
                        this.myDeskList.splice(index, 1);
                    }

                    this.allFunctions.forEach((item2, index2) => {
                        item2.children.forEach((item3, index3) => {
                            if (item3.id === id) {
                                // 子集添加btn为真字段显示加号
                                item3.btnTypeIsReduce = false;
                            }
                        });
                    });
                });
            },

            // 全部功能--添加单个项目按钮
            AddItem (id) {
                let canPush = false;

                if (this.myDeskList.length) {
                    this.myDeskList.forEach((item, index) => {
                        if (item.id !== id) {
                            canPush = true;
                        }
                    });
                } else if (this.myDeskList.length === 0) {
                    canPush = true;
                }

                if (canPush) {
                    this.allFunctions.forEach((item2, index2) => {
                        item2.children.forEach((item3, index3) => {
                            if (item3.id === id) {
                                this.myDeskList.push(item3);
                                // 子集添加btn为真字段显示减号
                                item3.btnTypeIsReduce = true;
                            }
                        });
                    });
                }
            },

            // 点击按钮页面跳转
            jumpPage (id, name) {
                // 增加我的使用记录
                if (id) {
                    depot.post({
                        url: this.URL.USER.SAVE_MY_USE_HISTORY,
                        data: id,
                        cb: (data) => {}
                    });
                }
                this.$router.push({
                    name: name
                });
            }
        },

        beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当钩子执行前，组件实例还没被创建
            next(vm => {
                // 通过 `vm` 访问组件实例
                // if (from.name === 'createCustomer' || from.name === 'editCustomer') {
                //     vm.reload();
                // }
            });
        }
    };
</script>
<style lang="less">
    @import "../../styles/common.less";

    .myDesktop {
        .title.sty1{
            position: relative;
            padding-left: 10px;
            color:#fff;
            &:before{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 5px;
                height: 100%;
                background-color: #0099ff;
            }
        }
        .menu-out {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;

            .munuSty1 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                min-width: 100%;
                // width: 100%;
                .munuSty1-list {
                    margin-right: 10px;
                    margin-top: 10px;

                    .HistoryList {
                        .HistoryItem {
                            padding: 0 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            color:#fff;
                        }
                    }
                }

                .list-box {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    /*justify-content: space-between;*/
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                }
            }

            .menu-out-btn {
                // margin-top:10px;
                //  新增
                display: flex;
                align-items: center;

                p {
                    margin-left: 10px;
                    cursor: pointer;

                    img {
                        display: block;
                        width: 25px;
                        height: 25px;
                    }
                }
            }
        }
        .title.sty2 {
            color:#fff;
        }
        .title.sty3 {
            padding: 16px;
            // background: #fff;
            margin: 10px 0;
            border-radius: 5px;
            color:#fff;
            .sty2{
                position: relative;
                padding-left: 10px;
                &:before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 5px;
                    height: 100%;
                    background-color: #0099ff;
                }
            }
        }

        .allFunctions-box {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;

            .allFunctions-item {
                width: 49%;
                margin: 0 0 5px 0;
            }
        }

        .imgBox {
            width: 25px;
            height: 25px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100%;
            display: inline-block;
            
        }
    }
</style>
